@charset "utf-8";
@import "common/reset";
//像素比除以2
@function p($px){
    @return $px/2+px;
}
.mobile{
    background: #fff;
    header{
        overflow: hidden;
        .back{
            float: left;
            
            //图片溢出部分隐藏
//          overflow: hidden;
            margin-top: p(48);
            margin-left: p(23);
            a{
                text-align: center;
                padding-top: p(15);
                font-size: p(21);
                font-weight: bold;
                color: #000;
                display: inline-block;
                width: p(123);
                height: p(57);
                border: p(3) solid #ff9344;
                border-radius: p(16);
            }
        }
        .title{
            width: p(54);
            height: p(26);
            margin: 0 auto;
            margin-top: p(64);
            
           h1{
               font-size: p(26);
               line-height: p(26);
           } 
           
        }
        .sel{
            float: right;
            position: relative;
            margin-top: p(47);
            margin-right: p(21);
            width: p(163);
            height: p(60);
            border: p(3) solid #ff9344;
          //  清除select框的默认样式
            select{
                border: none;
                /*将默认的select选择框样式清除*/
                 appearance:none;
                 -moz-appearance:none;
                 -webkit-appearance:none;
                 background: transparent;
                 width: 100%;
                 height: 100%;
                 padding-left: p(14);
                    }
                /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
            select::-ms-expand { display: none; }
            &::after{
                position: absolute;
                top: p(22);
                right: p(11);
                content:"";
                display: block;
                width: 0px;
                height: 0px;
                border-top: p(16) solid #ff9344;
                border-left: p(16) solid transparent;
                border-right: p(16) solid transparent;
            }
        }
    }
   //主体内容
   section{
       margin-top: p(18);
       margin-bottom: 20%;
       padding: 0 p(23);
       .swiper-container{
           margin: 0 auto;
           overflow: hidden;
           padding: p(35) 0;
          .swiper-wrapper{ 
              width: 100%;
          .swiper-slide{
              width: p(185);
              height: p(185);
              float: left;
//            padding: 0 p(30);
              
            .food{
                width: 100%;
                height: p(150);
              
              img{
                  width: 100%;
                  border-radius: 50%;
                  text-align: center;
              }  
            }  
            p{
                text-align: center;
                font-size: p(26);
                margin-top: 20%;
            }
          } 
          }
       }
       //美食类
           .meishilei{
                margin: 0 auto;
                margin-top: p(34);
                padding: 0 p(21);
                overflow: hidden;
            .logo{
                float: left;
                width: p(56);
                height: p(44);
                img{
                    width: 100%;
                }
             }
        h1{
            font-size: p(30);
            line-height: p(30);
            margin-top: p(7);
            margin-left: p(65);
            font-weight: normal;
        }
        .more{
            float: right;
            margin-top: p(1);
            span{
                color: #000;
                font-size: p(24);
                vertical-align: middle;
            }
            input[type="image"]{
                width: p(25);
                height: p(26);
                  vertical-align: middle;
            }
        }
        
    }
    .food_pic{
        margin-top: p(37);
        padding: 0 p(23);
        
       .food_pic_01{
           width: 20%;
           float: left;
           &:not(:last-child){
               margin-right: 6%;
           }
          img{
              width: 100%;
          } 
       }
    }
     //运动类
           .sport{
                margin: 0 auto;
                margin-top: p(34);
                padding: 0 p(21);
                overflow: hidden;
            .logo{
                float: left;
                width: p(47);
                height: p(58);
                img{
                    width: 100%;
                }
             }
        h1{
            font-size: p(30);
            line-height: p(30);
            margin-top: p(21);
            margin-left: p(65);
            font-weight: normal;
        }
        .more{
            float: right;
            margin-top: p(12);
            span{
                color: #000;
                font-size: p(24);
                line-height: p(24);
                vertical-align: middle;
            }
            input[type="image"]{
                width: p(25);
                height: p(26);
                  vertical-align: middle;
            }
        }
        
    }
    .sport_pic{
        margin-top: p(43);
        padding: 0 p(23);
        
       .food_pic_01{
           width: 20%;
           float: left;
           &:not(:last-child){
               margin-right: 6%;
           }
          img{
              width: 100%;
          } 
       }
    }
     //电影类
           .movie{
                margin: 0 auto;
                margin-top: p(34);
                padding: 0 p(21);
                overflow: hidden;
            .logo{
                float: left;
                width: p(53);
                height: p(52);
                img{
                    width: 100%;
                }
             }
        h1{
            font-size: p(30);
            line-height: p(30);
            margin-top: p(14);
            margin-left: p(65);
            font-weight: normal;
        }
        .more{
            float: right;
            margin-top: p(12);
            span{
                color: #000;
                font-size: p(24);
                line-height: p(24);
                vertical-align: middle;
            }
            input[type="image"]{
                width: p(25);
                height: p(26);
                  vertical-align: middle;
            }
        }
        
    }
    .sport_pic{
        margin-top: p(48);
        padding: 0 p(23);
        
       .food_pic_01{
           width: 20%;
           float: left;
           &:not(:last-child){
               margin-right: 6%;
           }
          img{
              width: 100%;
          } 
       }
    }
   
}
    //脚部
    footer{
          padding-bottom: p(14);
          padding-top: p(14);
          background: #fff;
          position: fixed;
          width: 100%;
          right: 0;
          bottom: 0;
     .footer_nav{
        width: 100%;
        .home{
            width: 9%;
            float: left;
            margin: 0 8%;
        img{
           width: 100%; 
        }
        p{
            font-size: p(26);
            text-align: center;
            color: #000;
        }
        }
    }
    }
}